<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf - 8">
        <meta name = "viewport" content="
        initial-scale= 1.0,maximum-scale=1.0,user-scalable=no">
        <title>

        </title>
        <script src="C:/Users/24098/Desktop/978-7-302-48199-7《HTML5 App应用开发教程》教辅/配套资源包/chapter06/scripts/jquery-3.1.1.min.js">
        </script>
<style>
    input[type = 'checkbox']{
        width:30px;
        height: 30px;
    }
    label{
        font-size:20px;
    }
    input[type = 'button']{
        margin-top: 30px;
        width:100px;
        height:30px;
        font-size:15px;
    }
</style>
</head>
    <body>
        <label><input type="checkbox"/>HTML5</label>
        <label><input type="checkbox"/>JavaScript</label>
            
            <input type="button" value = "选中"  id="btnCheck"/>
            <input type="button" value = "取消" id = "btnUnCheck" />
       

        
    

        <script>
            $.fn.extend({
                check:function(){
                    $(this).each(function(){
                        this.checked = true;
                    });
                },
                uncheck:function(){
                    $(this).each(function(){
                        this.checked = false;
                    });
                }
            });
            $("#btnCheck").click(function(){
                $(":checkbox").check();
            });
            $("#btnUnCheck").click(function(){
                $(":checkbox").uncheck();
            });
            
           
        </script>

    </body>
</html>